<template>
  <div class="ranking">
    <header>
      <span>
      </span>
    </header>

    <main>
      <!-- <van-dropdown-menu active-color="#ff0000">
        <van-dropdown-item
          :value="vantData.value1"
          :options="vantData.option1[0]"
        />
        <van-dropdown-item
          :value="vantData.value2"
          :options="vantData.option2[0]"
        />
      </van-dropdown-menu> -->
        <van-tree-select
          :items="items"
          :active-id.sync="activeId"
          :main-active-index.sync="activeIndex"
        />

      <!-- <div class="select">
        <div
          v-for="(item,index) in list"
          :key='index'
          @click="changeShow($event,index)"
          :class="index===red?'active':''"
        >
          {{item}}
        </div>

      </div>
      <div class="list">
        <dl
          class="shop"
          v-for="item in list2"
          :key='item'
          @click="toDetail(item.manageShopID)"
        >
          <navigator :url="`/pages/detail/detail?id=${item.shopID}`">
            <dt><img
                :src="item.logo"
                alt=""
              ></dt>
            <dd>
              <h3>{{`${item.shopName}`}}</h3>
              <p><i
                  :class="item.avgReview>=index?'iconfont icon-start active':'iconfont icon-start'"
                  v-for='(it,index) in star'
                  :key='index'
                ></i><span>{{`￥${item.avgPrice}/人`}}</span>
              </p>
              <p><span>{{item.styleCooking}}</span><span>{{`${(item.distance/1000).toFixed(2)}km`}}</span></p>
              <p v-show='item.youpuFullName'>
                <span>{{item.youpuFullName}}</span>
              </p>
            </dd>
          </navigator>

        </dl>
      </div>
      <div class="loading">加载中...</div>
      <div
        class="mask"
        v-show="isShow"
      >
        <div
          v-show="dindex===0"
          class="tab"
        >
          <div class="left">
            <div
              :class="index===lindex?'listnode active':'listnode' "
              v-for='(item,index) in DistrictList'
              :key='item.id'
              @click="changeColor(item,index)"
            >
              {{item.name}}
            </div>
          </div>
          <div class="right">
            <div
              v-for='ite in list1'
              :key='ite'
              class="listnode"
              @click="getList(ite)"
            >{{ite.name}}</div>
          </div>
        </div>
        <div
          v-show="dindex===1"
          class="tab"
        >2</div>
        <div
          v-show="dindex===2"
          class="tab"
        >3</div>
        <div
          v-show="dindex===3"
          class="tab"
        >4</div>
      </div> -->
    </main>
  </div>
</template>

<script>
import { getRanking } from "@/service/index";
import {
  getDistrictList,
  getfiltercontent,
  getListDate
} from "@/service/modules/fire";

export default {
  data() {
    return {
      params: {
        cityId: 19,
        from: 1209
      },
      vantData: {
        option1: [],
        value1: 1,
        option2: [],
        value2: 0
      },
      vantDatas:[],
      data: {
        text: "不限",
        value: 1
      },
      items: [
        { text: '浙江', children: [{text: '好人',id:'0'},{text: '个人',id:'1'}], dot: true },
        { text: '江苏', children: [{text: '李天一',id:'0'},{text: '呵呵',id:'1'}], badge: 5 },
      ],
      activeId: 1,
      activeIndex:0
      // isTop: false,
      // DistrictList: [],
      // isShow: false,
      // list: ["附近", "全部菜系"],
      // dindex: 0,
      // lindex: 0,
      // list1: [],
      // list2: [],
      // star: [1, 2, 3, 4, 5],
      // red: 0,
      // page: 1
    };
  },

  async onShow() {
    let result = await getRanking(this.params);
    if (result.errno == 0) {
      console.log(result.data.areas);
      console.log(result.data.style);
      this.vantData.option1.push(
        result.data.areas.map((item,index) => {
          return {
            text: item.name,
            value: item.id,
            children: item.bc.map(items => {
              return {
                text: item.name,
                id: item.id,
                disabled: true
              }
            })
          };
        })
      );
      console.log(this.vantData.option1.find((item,index) => index));
      this.vantData.option1[0].unshift(this.data);
      this.vantDatas.push(this.vantData.option1[0].map(items => items.children));
      console.log(this.vantDatas[0]);

      this.vantData.option2.push(
        result.data.style.map(item => {
          return {
            text: item.name,
            value: item.id,
            relationType: item.relationType
          };
        })
      );
    }
  }

  // methods: {
  //   toDetail(id) {},
  //   changeShow(e, index) {
  //     this.isShow = true;
  //     this.dindex = index;
  //     this.isTop = !this.isTop;
  //     if (this.isTop) {
  //       uni.pageScrollTo({
  //         scrollTop: e.changedTouches[0].pageY - 80
  //       });
  //     } else {
  //       this.isShow = false;
  //     }
  //   },
  //   changeColor(item, index) {
  //     this.lindex = index;
  //     this.list1 = item.bc;
  //   },
  //   async getList(ite) {
  //     let res = await getListDate({
  //       page: 1,
  //       pageSize: 20,
  //       cityId: 19,
  //       longitude: 116.29290008544922,
  //       latitude: 40.03954315185547,
  //       type: "all",
  //       bcidName: ite.name,
  //       bcid: ite.id,
  //       mwAuthToken:
  //         "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqtPCSKhwebLrgjfpX-CQWJIcZYXmpdLdIF3rNSY-BJe8dSyjtMBhBHk20pqzLLrwWAX-Cq4yzX-ChX-Csk9vBdT1EflbSDPNZFGgxBc5VnC14kzL8imwH7UY-BgBh0Yhgu8NUZXa5Gthb4rm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
  //       fromw: 1401
  //     });
  //     this.isShow = false;
  //     if (res) {
  //       this.list2 = res.data.shops;
  //     }
  //   }
  // },
  // async onReachBottom() {
  //   this.page += 1;
  //   let res = await getListDate({
  //     page: this.page,
  //     pageSize: 20,
  //     cityId: 19,
  //     longitude: 116.29290008544922,
  //     latitude: 40.03954315185547,
  //     type: "all",
  //     mwAuthToken:
  //       "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqtPCSKhwebLrgjfpX-CQWJIcZYXmpdLdIF3rNSY-BJe8dSyjtMBhBHk20pqzLLrwWAX-Cq4yzX-ChX-Csk9vBdT1EflbSDPNZFGgxBc5VnC14kzL8imwH7UY-BgBh0Yhgu8NUZXa5Gthb4rm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
  //     fromw: 1401
  //   });
  //   if (res) {
  //     this.list2 = this.list2.concat(res.data.shops);
  //   }
  // },

  // async created() {
  //   let res = await getfiltercontent({
  //     cityId: 19,
  //     mwAuthToken:
  //       "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqtPCSKhwebLrgjfpX-CQWJIcZYXmpdLdIF3rNSY-BJe8dSyjtMBhBHk20pqzLLrwWAX-Cq4yzX-ChX-Csk9vBdT1EflbSDPNZFGgxBc5VnC14kzL8imwH7UY-BgBh0Yhgu8NUZXa5Gthb4rm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
  //     mAuthToken:
  //       "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqtPCSKhwebLrgjfpX-CQWJIcZYXmpdLdIF3rNSY-BJe8dSyjtMBhBHk20pqzLLrwWAX-Cq4yzX-ChX-Csk9vBdT1EflbSDPNZFGgxBc5VnC14kzL8imwH7UY-BgBh0Yhgu8NUZXa5Gthb4rm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
  //     fromw: 1401
  //   });
  //   if (res) {
  //     // console.log(res.data.areas, '---------------------')
  //     this.DistrictList = res.data.areas;
  //   }
  //   let res1 = await getListDate({
  //     page: 1,
  //     pageSize: 20,
  //     cityId: 19,
  //     longitude: 116.29290008544922,
  //     latitude: 40.03954315185547,
  //     type: "all",
  //     mwAuthToken:
  //       "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqtPCSKhwebLrgjfpX-CQWJIcZYXmpdLdIF3rNSY-BJe8dSyjtMBhBHk20pqzLLrwWAX-Cq4yzX-ChX-Csk9vBdT1EflbSDPNZFGgxBc5VnC14kzL8imwH7UY-BgBh0Yhgu8NUZXa5Gthb4rm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
  //     fromw: 1401
  //   });
  //   if (res1) {
  //     this.list2 = res1.data.shops;
  //   }
  // }
};
</script>

<style lang='scss'>
.ranking {
  width: 100%;
  height: 100%;

  header {
    width: 100%;
    height: 400rpx;
    background: url(https://m.mwfile.cn/mm1005/image/20190423/banner-city.png)
      no-repeat center;
    background-size: 100% 400rpx;
  }

  main {
    width: 100%;
    height: 784rpx;

    position: relative;
    .select {
      display: flex;
      justify-content: space-around;
      font-size: 30rpx;
      .active {
        color: red;
      }
    }
    .loading {
      text-align: center;
      height: 60rpx;
    }
    .list {
      width: 100%;
      background: #eee;
      .shop {
        navigator {
          width: 100%;
          background: #fff;
          margin: 10rpx 0;
          padding: 20rpx 0;
          display: flex;
        }
        dt {
          width: 30%;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 80%;
            height: 80%;
          }
        }
      }
      dd {
        width: 70%;
        h3 {
          font-weight: bold;
        }
        p {
          font-size: 24rpx;
          color: #ccc;
          margin: 20rpx 0;
          .active {
            color: orange;
          }
          i {
            display: inline;
          }
          span {
            margin-right: 50rpx;
          }
        }
      }
    }
    .mask {
      width: 100%;
      height: 2000rpx;

      background: rgba(0, 0, 0, 0.5);
      position: absolute;
      top: 50rpx;
      left: 0;
      font-size: 32rpx;
      .tab {
        width: 100%;
        height: 600rpx;
        background: #eee;

        .left {
          width: 50%;
          height: 100%;
          background: #fff;
          overflow: scroll;
          float: left;
          .active {
            background: #eee;
            color: red;
          }
          .listnode {
            padding: 20rpx 20rpx;
          }
        }
        .right {
          width: 50%;
          height: 100%;
          float: right;
          overflow: scroll;
          .listnode {
            padding: 20rpx 20rpx;
          }
        }
      }
    }
  }
}
</style>
